<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-实现异步请求</title>
    <script src="js/jquery-3.7.1.js"></script>
</head>
<body>
    <h1 align="center">学生列表</h1>
    <table border="1" align="center" width="80%" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>分数</th>
                <th>出生</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        //页面加载时，向服务器发起异步请求，查询所有的学生信息
        $(document).ready(function(){
            $.ajax({
                url:"list.do",
                type:"get",
                dataType:"json",
                success:function(listArr){
                    $.each(listArr,function(i,stu){
                        var tr = $("<tr align='center'></tr>");
                        var td1 = $("<td>"+stu.name+"</td>");
                        var td2 = $("<td>"+stu.age+"</td>");
                        var td3 = $("<td>"+stu.score+"</td>");
                        var td4 = $("<td>"+stu.born+"</td>");
                        var td5 = $("<td><span id='del'>删除</span> <span id='update'>修改</span></td>");
                        tr.append(td1).append(td2).append(td3).append(td4).append(td5)
                        $("table").append(tr);
                    });
                }
            })
        })
    </script>
</body>
</html>